<template>
  <div class="comment" ref="hh" id="comment">
    <div class="comment-head">
      {{ targetType === 2 ? '评论' : '回答' }} ({{
        commentData.total ? commentData.total : 0
      }})
    </div>
    <div class="comment-input">
      <n-input
        type="textarea"
        class="comment-text"
        maxlength="140"
        show-word-limit
        placeholder="留下你的评论"
        v-model:value="replyContent"
      ></n-input>
      <div class="comment-submit">
        <n-button size="small" round type="primary" @click="reply"
          >回复
        </n-button>
      </div>
    </div>
    <div class="comment-list" v-for="item in commentData.list" :key="item.id">
      <comment-card :commentItem="item"></comment-card>
    </div>
    <n-space justify="center" style="margin-top: 5px">
      <n-pagination
        v-model:page="pageIndex"
        v-model:page-count="pageCount"
        @update:page="getCommentList"
      />
    </n-space>
  </div>
</template>

<script setup>
import CommentCard from './CommentCard.vue'
import api from '@/api/api'
const { Comment } = api
const message = useMessage()

const pageIndex = ref(1)
const pageCount = ref(1)

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  // 目标类型 0 问题 ；1 评论 ；2 成果
  targetType: {
    type: Number,
    default: 0
  }
})

const getCommentList = () => {
  Comment.getList({
    id: props.id,
    curPage: pageIndex.value,
    type: props.targetType
  }).then((res) => {
    if (res.success) {
      commentData.value = res.data
      pageCount.value = res.data.maxPage
      pageIndex.value = res.data.curPage
    }
  })
}
const commentData = ref({
  list: [],
  total: 0
})

const replyContent = ref('')

const reload = inject('reload')

const reply = () => {
  if (replyContent.value.length <= 0) {
    message.warning('回复不能为空！')
    return
  }
  Comment.reply({
    id: props.id,
    type: props.targetType,
    content: replyContent.value
  }).then((res) => {
    if (res.success) {
      message.success('回复成功！')
      // reload()
      replyContent.value = ''
      getCommentList()
    } else {
      message.info('回复错误')
    }
  })
}

onMounted(() => {
  getCommentList()
})
</script>

<style scoped lang="scss">
.comment {
  .comment-head {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .comment-list {
    margin: 15px 0;
    border-bottom: 1px solid #eee;
  }

  .comment-text textarea {
    resize: none;
    height: 100px;
    border-color: #ccc;
    line-height: 23px;
  }

  .comment-submit {
    margin-top: 10px;
    text-align: right;
  }

  .comment-input {
    margin-bottom: 20px;
  }
}
</style>
